<template>
	<div class="switch-icon-wrapper" :class="value == 'yes' ? 'active' : ''" @click="check">
		<!-- <image class="switch-icon" src="https://static.inclusionconf.com/static/images/switch.png" mode="widthFix"></image>
		<image class="switch-icon switch-icon1" :style="{ display: value == 'yes' ? 'block' : 'none' }" src="https://static.inclusionconf.com/static/images/switched.png" mode="widthFix"></image> -->
		<div class="text" v-if="value == 'yes'">开</div>
		<div class="span"></div>
	</div>
</template>

<script>
	import protal from "@/api/protal"
	import { base } from '@/api/base.js'

	export default {
		props: {
			value: {
				type: String,
				default: 'yes'
			},
		},
		data() {
			return {}
		},
		methods: {
			check() {
				if (this.value == 'yes') {
					this.$emit('input', 'no')
				} else {
					this.$emit('input', 'yes')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.switch-icon-wrapper {
		position: relative;
		width: 64px;
		height: 24px;
		background: #1E234B;
		border-radius: 12px;
		position: relative;
		transition: .3s;
		
		.span {
			width: 18px;
			height: 18px;
			background: #777A92;
			border-radius: 50%;
			position: absolute;
			top: 3px;
			left: 3px;
			transition: .3s;
		}
		
		.text {
			position: absolute;
			left: 0;
			top: 0;
			width: 51px;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
			font-weight: 500;
			font-size: 13px;
			color: #7B51FF;
			line-height: 18px;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		
		&.active {
			background-color: #FFFFFF;
			
			.span {
				background-color: #7C5CFF;
				left: 43px;
			}
		}
	}
	
	.switch-icon {
		width: 59px;
	}
	
	.switch-icon1 {
		position: absolute;
		left: 0;
		top: 0;
	}
</style>